<template>
	<view class="city-select">
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
				<image class="search-icon" src="/static/img/search.png"></image>
				<input type="text" v-model="searchKey" placeholder="请输入城市名称" placeholder-class="placeholder" @input="onSearch" />
			</view>
		</view>

		<!-- 搜索结果列表 -->
		<scroll-view v-if="searchKey && searchResults.length > 0" class="search-result" scroll-y>
			<view class="result-item" v-for="(item, index) in searchResults" :key="index" @tap="selectCity(item)">
				{{item.name}}
			</view>
		</scroll-view>

		<!-- 城市列表 -->
		<scroll-view v-else class="city-list" scroll-y :scroll-into-view="scrollIntoIndex" @scroll="onScroll">
			<!-- 当前定位城市 -->
			<view class="section" id="current">
				<view class="section-title">当前定位城市</view>
				<view class="current-city" @tap="selectCity(currentCity)">
					<!-- <image class="location-icon" src="/static/img/location.png"></image> -->
					<text>{{currentCity.name}}</text>
				</view>
			</view>

			<!-- 热门城市 -->
			<view class="section" id="hot">
				<view class="section-title">热门城市</view>
				<view class="hot-cities">
					<view class="hot-city-item" v-for="(item, index) in hotCities" :key="index" @tap="selectCity(item)">
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 按字母排序的城市列表 -->
			<view class="section" v-for="(group, letter) in cityGroups" :key="letter" :id="letter">
				<view class="section-title">{{letter}}</view>
				<view class="city-item" v-for="(city, index) in group" :key="index" @tap="selectCity(city)">
					{{city.name}}
				</view>
			</view>
		</scroll-view>

		<!-- 右侧字母导航 -->
		<view class="letter-nav">
			<view class="letter-item" v-for="letter in letters" :key="letter" @tap="scrollToLetter(letter)">
				{{letter}}
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				searchKey: '',
				searchResults: [],
				scrollIntoIndex: '',
				currentCity: {
					name: '广州',
					code: '440100'
				},
				hotCities: [{
						name: '北京',
						code: '110100'
					},
					{
						name: '上海',
						code: '310100'
					},
					{
						name: '广州',
						code: '440100'
					},
					{
						name: '深圳',
						code: '440300'
					},
					{
						name: '杭州',
						code: '330100'
					},
					{
						name: '成都',
						code: '510100'
					},
					{
						name: '武汉',
						code: '420100'
					},
					{
						name: '重庆',
						code: '500100'
					},
				],
				cityGroups: {
					'A': [{
							name: '阿坝',
							code: '513200'
						},
						{
							name: '阿拉善',
							code: '152900'
						},
						{
							name: '阿里',
							code: '542500'
						},
						{
							name: '安康',
							code: '610900'
						},
						{
							name: '安庆',
							code: '340800'
						},
						{
							name: '鞍山',
							code: '210300'
						},
						{
							name: '安顺',
							code: '520400'
						},
						{
							name: '安阳',
							code: '410500'
						},
						{
							name: '澳门',
							code: '820000'
						}
					],
					'B': [{
							name: '北京',
							code: '110000'
						},
						{
							name: '白银',
							code: '620400'
						},
						{
							name: '保定',
							code: '130600'
						},
						{
							name: '宝鸡',
							code: '610300'
						},
						{
							name: '保山',
							code: '530500'
						},
						{
							name: '包头',
							code: '150200'
						},
						{
							name: '巴中',
							code: '511900'
						},
						{
							name: '北海',
							code: '450500'
						},
						{
							name: '蚌埠',
							code: '340300'
						},
						{
							name: '本溪',
							code: '210500'
						},
						{
							name: '毕节',
							code: '520500'
						},
						{
							name: '滨州',
							code: '371600'
						},
						{
							name: '百色',
							code: '451000'
						},
						{
							name: '亳州',
							code: '341600'
						}
					],
					'C': [{
							name: '成都',
							code: '510100'
						},
						{
							name: '重庆',
							code: '500000'
						},
						{
							name: '长沙',
							code: '430100'
						},
						{
							name: '长春',
							code: '220100'
						},
						{
							name: '沧州',
							code: '130900'
						},
						{
							name: '常德',
							code: '430700'
						},
						{
							name: '昌都',
							code: '542100'
						},
						{
							name: '长治',
							code: '140400'
						},
						{
							name: '常州',
							code: '320400'
						},
						{
							name: '巢湖',
							code: '341400'
						},
						{
							name: '潮州',
							code: '445100'
						},
						{
							name: '承德',
							code: '130800'
						},
						{
							name: '郴州',
							code: '431000'
						},
						{
							name: '赤峰',
							code: '150400'
						},
						{
							name: '池州',
							code: '341700'
						},
						{
							name: '崇左',
							code: '451400'
						},
						{
							name: '楚雄',
							code: '532300'
						},
						{
							name: '滁州',
							code: '341100'
						},
						{
							name: '朝阳',
							code: '211300'
						}
					],
					'D': [{
							name: '大连',
							code: '210200'
						},
						{
							name: '东莞',
							code: '441900'
						},
						{
							name: '大理',
							code: '532900'
						},
						{
							name: '丹东',
							code: '210600'
						},
						{
							name: '大庆',
							code: '230600'
						},
						{
							name: '大同',
							code: '140200'
						},
						{
							name: '大兴安岭',
							code: '232700'
						},
						{
							name: '德宏',
							code: '533100'
						},
						{
							name: '德阳',
							code: '510600'
						},
						{
							name: '德州',
							code: '371400'
						},
						{
							name: '定西',
							code: '621100'
						},
						{
							name: '迪庆',
							code: '533400'
						},
						{
							name: '东营',
							code: '370500'
						}
					],
					'E': [{
							name: '鄂尔多斯',
							code: '150600'
						},
						{
							name: '恩施',
							code: '422800'
						},
						{
							name: '鄂州',
							code: '420700'
						}
					],
					'F': [{
							name: '福州',
							code: '350100'
						},
						{
							name: '防城港',
							code: '450600'
						},
						{
							name: '佛山',
							code: '440600'
						},
						{
							name: '抚顺',
							code: '210400'
						},
						{
							name: '抚州',
							code: '361000'
						},
						{
							name: '阜新',
							code: '210900'
						},
						{
							name: '阜阳',
							code: '341200'
						}
					],
					'G': [{
							name: '广州',
							code: '440100'
						},
						{
							name: '桂林',
							code: '450300'
						},
						{
							name: '贵阳',
							code: '520100'
						},
						{
							name: '甘南',
							code: '623000'
						},
						{
							name: '赣州',
							code: '360700'
						},
						{
							name: '甘孜',
							code: '513300'
						},
						{
							name: '广安',
							code: '511600'
						},
						{
							name: '广元',
							code: '510800'
						},
						{
							name: '贵港',
							code: '450800'
						},
						{
							name: '果洛',
							code: '632600'
						}
					],
					'H': [{
							name: '杭州',
							code: '330100'
						},
						{
							name: '哈尔滨',
							code: '230100'
						},
						{
							name: '合肥',
							code: '340100'
						},
						{
							name: '海口',
							code: '460100'
						},
						{
							name: '呼和浩特',
							code: '150100'
						},
						{
							name: '海北',
							code: '632200'
						},
						{
							name: '海东',
							code: '632100'
						},
						{
							name: '海南',
							code: '632500'
						},
						{
							name: '海西',
							code: '632800'
						},
						{
							name: '邯郸',
							code: '130400'
						},
						{
							name: '汉中',
							code: '610700'
						},
						{
							name: '鹤壁',
							code: '410600'
						},
						{
							name: '河池',
							code: '451200'
						},
						{
							name: '鹤岗',
							code: '230400'
						},
						{
							name: '黑河',
							code: '231100'
						},
						{
							name: '衡水',
							code: '131100'
						},
						{
							name: '衡阳',
							code: '430400'
						},
						{
							name: '河源',
							code: '441600'
						},
						{
							name: '贺州',
							code: '451100'
						},
						{
							name: '红河',
							code: '532500'
						},
						{
							name: '淮安',
							code: '320800'
						},
						{
							name: '淮北',
							code: '340600'
						},
						{
							name: '怀化',
							code: '431200'
						},
						{
							name: '淮南',
							code: '340400'
						},
						{
							name: '黄冈',
							code: '421100'
						},
						{
							name: '黄南',
							code: '632300'
						},
						{
							name: '黄山',
							code: '341000'
						},
						{
							name: '黄石',
							code: '420200'
						},
						{
							name: '惠州',
							code: '441300'
						},
						{
							name: '葫芦岛',
							code: '211400'
						},
						{
							name: '呼伦贝尔',
							code: '150700'
						},
						{
							name: '湖州',
							code: '330500'
						},
						{
							name: '菏泽',
							code: '371700'
						}
					],
					'J': [{
							name: '济南',
							code: '370100'
						},
						{
							name: '佳木斯',
							code: '230800'
						},
						{
							name: '吉安',
							code: '360800'
						},
						{
							name: '江门',
							code: '440700'
						},
						{
							name: '焦作',
							code: '410800'
						},
						{
							name: '嘉兴',
							code: '330400'
						},
						{
							name: '嘉峪关',
							code: '620200'
						},
						{
							name: '揭阳',
							code: '445200'
						},
						{
							name: '吉林',
							code: '220200'
						},
						{
							name: '金昌',
							code: '620300'
						},
						{
							name: '晋城',
							code: '140500'
						},
						{
							name: '景德镇',
							code: '360200'
						},
						{
							name: '荆门',
							code: '420800'
						},
						{
							name: '荆州',
							code: '421000'
						},
						{
							name: '金华',
							code: '330700'
						},
						{
							name: '济宁',
							code: '370800'
						},
						{
							name: '晋中',
							code: '140700'
						},
						{
							name: '锦州',
							code: '210700'
						},
						{
							name: '九江',
							code: '360400'
						},
						{
							name: '酒泉',
							code: '620900'
						}
					],
					'K': [{
							name: '昆明',
							code: '530100'
						},
						{
							name: '开封',
							code: '410200'
						}
					],
					'L': [{
							name: '兰州',
							code: '620100'
						},
						{
							name: '拉萨',
							code: '540100'
						},
						{
							name: '来宾',
							code: '451300'
						},
						{
							name: '莱芜',
							code: '371200'
						},
						{
							name: '廊坊',
							code: '131000'
						},
						{
							name: '乐山',
							code: '511100'
						},
						{
							name: '凉山',
							code: '513400'
						},
						{
							name: '连云港',
							code: '320700'
						},
						{
							name: '聊城',
							code: '371500'
						},
						{
							name: '辽阳',
							code: '211000'
						},
						{
							name: '辽源',
							code: '220400'
						},
						{
							name: '丽江',
							code: '530700'
						},
						{
							name: '临沧',
							code: '530900'
						},
						{
							name: '临汾',
							code: '141000'
						},
						{
							name: '临夏',
							code: '622900'
						},
						{
							name: '临沂',
							code: '371300'
						},
						{
							name: '林芝',
							code: '542600'
						},
						{
							name: '丽水',
							code: '331100'
						},
						{
							name: '六安',
							code: '341500'
						},
						{
							name: '六盘水',
							code: '520200'
						},
						{
							name: '柳州',
							code: '450200'
						},
						{
							name: '陇南',
							code: '621200'
						},
						{
							name: '龙岩',
							code: '350800'
						},
						{
							name: '娄底',
							code: '431300'
						},
						{
							name: '漯河',
							code: '411100'
						},
						{
							name: '洛阳',
							code: '410300'
						},
						{
							name: '泸州',
							code: '510500'
						},
						{
							name: '吕梁',
							code: '141100'
						}
					],
					'M': [{
							name: '马鞍山',
							code: '340500'
						},
						{
							name: '茂名',
							code: '440900'
						},
						{
							name: '眉山',
							code: '511400'
						},
						{
							name: '梅州',
							code: '441400'
						},
						{
							name: '绵阳',
							code: '510700'
						},
						{
							name: '牡丹江',
							code: '231000'
						}
					],
					'N': [{
							name: '南京',
							code: '320100'
						},
						{
							name: '南昌',
							code: '360100'
						},
						{
							name: '南宁',
							code: '450100'
						},
						{
							name: '宁波',
							code: '330200'
						},
						{
							name: '南充',
							code: '511300'
						},
						{
							name: '南平',
							code: '350700'
						},
						{
							name: '南通',
							code: '320600'
						},
						{
							name: '南阳',
							code: '411300'
						},
						{
							name: '那曲',
							code: '542400'
						},
						{
							name: '内江',
							code: '511000'
						},
						{
							name: '宁德',
							code: '350900'
						},
						{
							name: '怒江',
							code: '533300'
						}
					],
					'P': [{
							name: '盘锦',
							code: '211100'
						},
						{
							name: '攀枝花',
							code: '510400'
						},
						{
							name: '平顶山',
							code: '410400'
						},
						{
							name: '平凉',
							code: '620800'
						},
						{
							name: '萍乡',
							code: '360300'
						},
						{
							name: '莆田',
							code: '350300'
						},
						{
							name: '濮阳',
							code: '410900'
						}
					],
					'Q': [{
							name: '青岛',
							code: '370200'
						},
						{
							name: '黔东南',
							code: '522600'
						},
						{
							name: '黔南',
							code: '522700'
						},
						{
							name: '黔西南',
							code: '522300'
						},
						{
							name: '庆阳',
							code: '621000'
						},
						{
							name: '清远',
							code: '441800'
						},
						{
							name: '秦皇岛',
							code: '130300'
						},
						{
							name: '钦州',
							code: '450700'
						},
						{
							name: '齐齐哈尔',
							code: '230200'
						},
						{
							name: '泉州',
							code: '350500'
						},
						{
							name: '曲靖',
							code: '530300'
						},
						{
							name: '衢州',
							code: '330800'
						}
					],
					'R': [{
							name: '日喀则',
							code: '542300'
						},
						{
							name: '日照',
							code: '371100'
						}
					],
					'S': [{
							name: '上海',
							code: '310000'
						},
						{
							name: '深圳',
							code: '440300'
						},
						{
							name: '苏州',
							code: '320500'
						},
						{
							name: '沈阳',
							code: '210100'
						},
						{
							name: '石家庄',
							code: '130100'
						},
						{
							name: '三门峡',
							code: '411200'
						},
						{
							name: '三明',
							code: '350400'
						},
						{
							name: '三亚',
							code: '460200'
						},
						{
							name: '商洛',
							code: '611000'
						},
						{
							name: '商丘',
							code: '411400'
						},
						{
							name: '上饶',
							code: '361100'
						},
						{
							name: '山南',
							code: '542200'
						},
						{
							name: '汕头',
							code: '440500'
						},
						{
							name: '汕尾',
							code: '441500'
						},
						{
							name: '韶关',
							code: '440200'
						},
						{
							name: '绍兴',
							code: '330600'
						},
						{
							name: '邵阳',
							code: '430500'
						},
						{
							name: '十堰',
							code: '420300'
						},
						{
							name: '朔州',
							code: '140600'
						},
						{
							name: '四平',
							code: '220300'
						},
						{
							name: '绥化',
							code: '231200'
						},
						{
							name: '遂宁',
							code: '510900'
						},
						{
							name: '随州',
							code: '421300'
						},
						{
							name: '宿迁',
							code: '321300'
						},
						{
							name: '宿州',
							code: '341300'
						}
					],
					'T': [{
							name: '天津',
							code: '120000'
						},
						{
							name: '太原',
							code: '140100'
						},
						{
							name: '泰安',
							code: '370900'
						},
						{
							name: '泰州',
							code: '321200'
						},
						{
							name: '台州',
							code: '331000'
						},
						{
							name: '唐山',
							code: '130200'
						},
						{
							name: '天水',
							code: '620500'
						},
						{
							name: '铁岭',
							code: '211200'
						},
						{
							name: '铜川',
							code: '610200'
						},
						{
							name: '通化',
							code: '220500'
						},
						{
							name: '通辽',
							code: '150500'
						},
						{
							name: '铜陵',
							code: '340700'
						},
						{
							name: '铜仁',
							code: '522200'
						},
						{
							name: '台湾',
							code: '710000'
						}
					],
					'W': [{
							name: '武汉',
							code: '420100'
						},
						{
							name: '乌鲁木齐',
							code: '650100'
						},
						{
							name: '无锡',
							code: '320200'
						},
						{
							name: '威海',
							code: '371000'
						},
						{
							name: '潍坊',
							code: '370700'
						},
						{
							name: '文山',
							code: '532600'
						},
						{
							name: '温州',
							code: '330300'
						},
						{
							name: '乌海',
							code: '150300'
						},
						{
							name: '芜湖',
							code: '340200'
						},
						{
							name: '乌兰察布',
							code: '150900'
						},
						{
							name: '武威',
							code: '620600'
						},
						{
							name: '梧州',
							code: '450400'
						}
					],
					'X': [{
							name: '厦门',
							code: '350200'
						},
						{
							name: '西安',
							code: '610100'
						},
						{
							name: '西宁',
							code: '630100'
						},
						{
							name: '襄阳',
							code: '420600'
						},
						{
							name: '湘潭',
							code: '430300'
						},
						{
							name: '湘西',
							code: '433100'
						},
						{
							name: '咸宁',
							code: '421200'
						},
						{
							name: '咸阳',
							code: '610400'
						},
						{
							name: '孝感',
							code: '420900'
						},
						{
							name: '邢台',
							code: '130500'
						},
						{
							name: '新乡',
							code: '410700'
						},
						{
							name: '信阳',
							code: '411500'
						},
						{
							name: '新余',
							code: '360500'
						},
						{
							name: '忻州',
							code: '140900'
						},
						{
							name: '西双版纳',
							code: '532800'
						},
						{
							name: '宣城',
							code: '341800'
						},
						{
							name: '许昌',
							code: '411000'
						},
						{
							name: '徐州',
							code: '320300'
						},
						{
							name: '香港',
							code: '810000'
						},
						{
							name: '锡林郭勒',
							code: '152500'
						},
						{
							name: '兴安',
							code: '152200'
						}
					],
					'Y': [{
							name: '银川',
							code: '640100'
						},
						{
							name: '雅安',
							code: '511800'
						},
						{
							name: '延安',
							code: '610600'
						},
						{
							name: '延边',
							code: '222400'
						},
						{
							name: '盐城',
							code: '320900'
						},
						{
							name: '阳江',
							code: '441700'
						},
						{
							name: '阳泉',
							code: '140300'
						},
						{
							name: '扬州',
							code: '321000'
						},
						{
							name: '烟台',
							code: '370600'
						},
						{
							name: '宜宾',
							code: '511500'
						},
						{
							name: '宜昌',
							code: '420500'
						},
						{
							name: '宜春',
							code: '360900'
						},
						{
							name: '营口',
							code: '210800'
						},
						{
							name: '益阳',
							code: '430900'
						},
						{
							name: '永州',
							code: '431100'
						},
						{
							name: '岳阳',
							code: '430600'
						},
						{
							name: '榆林',
							code: '610800'
						},
						{
							name: '运城',
							code: '140800'
						},
						{
							name: '云浮',
							code: '445300'
						},
						{
							name: '玉树',
							code: '632700'
						},
						{
							name: '玉溪',
							code: '530400'
						},
						{
							name: '玉林',
							code: '450900'
						}
					],
					'Z': [{
							name: '杂多县',
							code: '632722'
						},
						{
							name: '赞皇县',
							code: '130129'
						},
						{
							name: '枣强县',
							code: '131121'
						},
						{
							name: '枣阳市',
							code: '420683'
						},
						{
							name: '枣庄',
							code: '370400'
						},
						{
							name: '泽库县',
							code: '632323'
						},
						{
							name: '增城市',
							code: '440183'
						},
						{
							name: '曾都区',
							code: '421303'
						},
						{
							name: '泽普县',
							code: '653124'
						},
						{
							name: '泽州县',
							code: '140525'
						},
						{
							name: '札达县',
							code: '542522'
						},
						{
							name: '扎赉特旗',
							code: '152223'
						},
						{
							name: '扎兰屯市',
							code: '150783'
						},
						{
							name: '扎鲁特旗',
							code: '150526'
						},
						{
							name: '扎囊县',
							code: '542222'
						},
						{
							name: '张北县',
							code: '130722'
						},
						{
							name: '张家港',
							code: '320582'
						},
						{
							name: '张家界',
							code: '430800'
						},
						{
							name: '张家口',
							code: '130700'
						},
						{
							name: '漳平市',
							code: '350881'
						},
						{
							name: '漳浦县',
							code: '350623'
						},
						{
							name: '章丘市',
							code: '370181'
						},
						{
							name: '樟树市',
							code: '360982'
						},
						{
							name: '张掖',
							code: '620700'
						},
						{
							name: '漳州',
							code: '350600'
						},
						{
							name: '湛江',
							code: '440800'
						},
						{
							name: '肇庆',
							code: '441200'
						},
						{
							name: '昭通',
							code: '530600'
						},
						{
							name: '郑州',
							code: '410100'
						},
						{
							name: '镇江',
							code: '321100'
						}
					]
				}
			}
		},

		computed: {
		    letters() {
		      return ['当前', '热门', ...Object.keys(this.cityGroups)]
		    }
		  },
		  
		  methods: {
		    // 搜索城市
		    onSearch() {
		      if (!this.searchKey) {
		        this.searchResults = []
		        return
		      }
		      
		      // 实现城市搜索逻辑
		      this.searchResults = this.searchCities(this.searchKey)
		    },
		    
		    // 搜索城市的具体实现
		    searchCities(keyword) {
		      let results = []
		      Object.values(this.cityGroups).forEach(group => {
		        const matched = group.filter(city => 
		          city.name.includes(keyword)
		        )
		        results = [...results, ...matched]
		      })
		      return results
		    },
		    
		    // 选择城市
		    selectCity(city) {
		      // 触发全局事件，传递选中的城市
		      uni.$emit('citySelected', city);
		      
		      // 保存到本地存储，方便下次使用
		      uni.setStorageSync('selectedCity', city);
		      
		      // 返回上一页
		      uni.navigateBack();
		    },
		    
		    // 滚动到指定字母区域
		    scrollToLetter(letter) {
		      if (letter === '当前') letter = 'current'
		      if (letter === '热门') letter = 'hot'
		      this.scrollIntoIndex = letter
		    },
		    
			getAreaByLocation(){
				const longitude = uni.getStorageSync('longitude')
				const latitude = uni.getStorageSync('latitude')
				app.get('address/getAreaByLocation', {
					latitude:latitude,
					longitude:longitude,
					type:0,
				}, (res) => {
					if(res.status == 1){
						const result = res;
						const city = `${result.province}/${result.city}/${result.district}`
						uni.setStorageSync('city', city)
						uni.setStorageSync('cityName', result.city)
						uni.setStorageSync('areaName', result.district)
						
					}else{
						app.error(res.msg)
					}
					
				});
			},
		    // 获取当前定位
		    async getCurrentLocation() {
		      try {
		        const res = await uni.getLocation({
		          type: 'gcj02'
		        });
		        
		        // 调用腾讯地图API获取城市信息
		        const key = '6E4BZ-3CCCW-RSGRQ-YKJ26-GETVT-FAFCV';
		        const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=${key}`;
		        
		        uni.request({
		          url: url,
		          success: (result) => {
		            if (result.data.status === 0) {
		              const cityName = result.data.result.address_component.city;
		              // 在城市列表中查找对应的城市对象
		              const city = this.findCityByName(cityName);
		              if (city) {
		                this.currentCity = city;
		              }
		            }
		          }
		        });
		      } catch (e) {
		        console.error('获取定位失败', e);
		      }
		    },
		    
		    // 根据城市名查找城市对象
		    findCityByName(cityName) {
		      // 先从热门城市中查找
		      let city = this.hotCities.find(item => item.name === cityName);
		      if (city) return city;
		      
		      // 再从所有城市中查找
		      for (let group of Object.values(this.cityGroups)) {
		        city = group.find(item => item.name === cityName);
		        if (city) return city;
		      }
		      return null;
		    },
		    
		    onScroll(e) {
		      // 可以在这里处理滚动事件
		    }
		  },
		  
		  mounted() {
		    // 先尝试从本地存储获取上次选择的城市
		    const lastSelectedCity = uni.getStorageSync('selectedCity');
		    if (lastSelectedCity) {
		      this.currentCity = lastSelectedCity;
		    }
		    
		    // 获取当前定位
			this.getAreaByLocation()
		    // this.getCurrentLocation();
		  }
	}
</script>

<style>
	.city-select {
		height: 100vh;
		background: #f5f5f5;
		position: relative;
	}

	.search-box {
		padding: 20rpx;
		background: #fff;
	}

	.search-input {
		display: flex;
		align-items: center;
		background: #f5f5f5;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.placeholder {
		color: #999;
		font-size: 28rpx;
	}

	.search-result {
		position: absolute;
		top: 100rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		z-index: 1;
	}

	.result-item {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
	}

	.city-list {
		height: calc(100vh - 100rpx);
	}

	.section {
		background: #fff;
		margin-bottom: 20rpx;
	}

	.section-title {
		padding: 20rpx;
		font-size: 24rpx;
		color: #999;
		background: #f5f5f5;
	}

	.current-city {
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
	}

	.location-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.hot-cities {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
	}

	.hot-city-item {
		width: 30%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
	}

	.city-item {
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
	}

	.letter-nav {
		position: fixed;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		/* background: rgba(0, 0, 0, 0.3); */
		border-radius: 30rpx;
		padding: 10rpx 0;
	}

	.letter-item {
		/* padding: 8rpx 12rpx; */
		font-size: 24rpx;
		/* color: #fff; */
		text-align: center;
	}
</style>
